<template>
  <div style="padding: 0 15px;height: 100vh;background-color: #f7fafd;">
    <van-nav-bar
        left-arrow
        title="签约记录"
        @click-left="onClickLeft"
    />
    <div style="width: 100%;margin-left: 30px;margin-top: 20px">
      <div class="block">
        <el-timeline :reverse="reverse">
          <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.recordTime|format('yyyy-MM-dd')">
            <div v-if="index >= activities.length-1" style="width: 300px;background-color: white;padding: 10px;border-radius: 10px" @click="handleReminderItemClick(activity)">
                  <span style="display: inline-block;font-size: 18px;margin-bottom: 10px;font-weight: 700">
                    {{ activity.status }}
                  </span>
              <br>
              <span style="font-size: 14px">
                    签约团队：{{ activity.doctorTeamName }}
                  </span>
            </div>
            <div v-if="index<=activities.length-1-1" style="width: 300px;background-color: #f2f2f2;color: #a0a0a0;padding: 10px;border-radius: 10px">
                  <span style="display: inline-block;font-size: 18px;margin-bottom: 10px;font-weight: 700">
                    {{ activity.status }}
                  </span>
              <br>
              <span style="font-size: 14px">
                    签约团队：{{ activity.doctorTeamName }}
                  </span>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AgencyRecordView",
  data() {
    return {
      reverse: true,
      agencyRecordVo: {
        contractApplicationStatus: "",
        contractRecordList: [],
        doctorId: '',
        doctorTeamId: '',
        doctorTeamName: "",

      },
      activities: [
        // {
        //   status: '签约成功',
        //   doctorTeamName: '签约成功',
        //   recordTime: '2018-04-15'
        // }, {
        //   status: '医生审核通过，等待支付',
        //   doctorTeamName: '医生审核通过，等待支付',
        //   recordTime: '2018-04-13'
        // }, {
        //   status: '签约申请提交成功',
        //   doctorTeamName: '签约申请提交成功',
        //   recordTime: '2018-04-11'
        // }
      ],
    }
  },
  created() {
    const token = JSON.parse(localStorage.getItem("token"));
    if (!token) {
      this.$message.error('请先登录');
      setTimeout(() => {
        this.$router.push({name: 'login'});
      });
    }
    // 设置全局默认请求头
    this.axios.defaults.headers.common['token'] = token;
    this.findAgencyRecord();
  },
  methods: {
    handleReminderItemClick(activity){
      console.log(activity);
      // this.$router.push({
      //   name: 'agencyRecordDetail',
      //   query: {
      //     contractRecordId: activity.contractRecordId
      //   }
      // })
    },
    activitiesColorGray(){

    },
    findAgencyRecord() {
      this.axios.get(`http://localhost:10086/api/agency/contract_record/findAgencyRecord`).then(res => {
        if (res.data.code == 200) {
          console.log(res.data.data);
          this.agencyRecordVo = res.data.data;
          // this.activities = this.agencyRecordVo.contractRecordList;
          for (const contractRecordListElement of this.agencyRecordVo.contractRecordList) {
            if (contractRecordListElement.status == '申请提交'||contractRecordListElement.status == '医生审核中'){
              if (this.activities.some(item => item.status == '签约申请提交成功')){
                continue;
              }
              this.activities.push({
                status: '签约申请提交成功',
                doctorTeamName: this.agencyRecordVo.doctorTeamName,
                recordTime: contractRecordListElement.recordTime
              })
            }
            if (contractRecordListElement.status == '审核通过'||contractRecordListElement.status == '待支付'){
              if (this.activities.some(item => item.status == '医生审核通过,等待支付')){
                continue;
              }
              this.activities.push({
                status: '医生审核通过,等待支付',
                doctorTeamName: this.agencyRecordVo.doctorTeamName,
                recordTime: contractRecordListElement.recordTime
              })
            }
            if (contractRecordListElement.status == '已支付'||contractRecordListElement.status == '已签约'){
              if (this.activities.some(item => item.status == '支付成功,已签约')){
                continue;
              }
              this.activities.push({
                status: '支付成功,已签约',
                doctorTeamName: this.agencyRecordVo.doctorTeamName,
                recordTime: contractRecordListElement.recordTime
              })
            }
            if (contractRecordListElement.status == '审核不通过'){
              if (this.activities.some(item => item.status == '签约申请审核失败')){
                continue;
              }
              this.activities.push({
                status: '签约申请审核失败',
                doctorTeamName: this.agencyRecordVo.doctorTeamName,
                recordTime: contractRecordListElement.recordTime
              })
            }
            // this.activities.push({
            //   status: contractRecordListElement.status,
            //   doctorTeamName: this.agencyRecordVo.doctorTeamName,
            //   recordTime: contractRecordListElement.recordTime
            // })
          }
          this.activitiesColorGray();
        } else {
          console.log(res);
          this.$message.error('获取信息失败，请联系管理员');
        }
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value,arg);

    }
  },
}
</script>

<style scoped>
.message-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.message-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-time {
  color: #999;
}

.message-team {
  color: #666;
  margin-top: 5px;
}
</style>